<template>
	<SecondTitle title="旅客信息" />
	<div class="list">
		<div class="item">
			<img :src="icon1" alt="" class="icon" />
			<div class="info">
				<div class="number">
					<div class="total">{{ item.lastHourInCount }}</div>
					<div class="unit">人</div>
				</div>
				<div class="name">前1h累计进站</div>
			</div>
		</div>
		<div class="item">
			<img :src="icon2" alt="" class="icon" />
			<div class="info">
				<div class="number">
					<div class="total">{{ item.lastHourOutCount }}</div>
					<div class="unit">人</div>
				</div>
				<div class="name">前1h累计出站</div>
			</div>
		</div>
		<div class="item">
			<img :src="icon3" alt="" class="icon" />
			<div class="info">
				<div class="number">
					<div class="total">{{ item.realTimeCount }}</div>
					<div class="unit">人</div>
				</div>
				<div class="name">当前实时站内</div>
			</div>
		</div>
		<!-- <div class="item" v-for="(item, index) in list" :key="index">
			<img :src="item.icon" alt="" class="icon" />
			<div class="info">
				<div class="number">
					<div class="total">{{ item.total }}</div>
					<div class="unit">{{ item.unit }}</div>
				</div>
				<div class="name">{{ item.name }}</div>
			</div>
		</div> -->
	</div>
</template>
<script lang="ts" setup>
	import { requireImg } from '@/utils/common'
	import { ref, onMounted } from 'vue'
	import { getPerfFlow } from '@/api/train'

	const list: any = ref();
	const item: any = ref({
		lastHourInCount: "",
		lastHourOutCount: "",
		realTimeCount: ""
	});

	const icon1 = requireImg('global/person1.png')
	const icon2 = requireImg('global/person2.png')
	const icon3 = requireImg('global/person3.png')

	onMounted( async () => {
		let params = {
			pageSize: 10,
			pageNum: 1
		}
		await getPerfFlow(params).then((res: any) => {
			list.value = res.data.records;
			item.value = res.data.records[0]
		})
	})
	
	// const list = ref([
	// 	{
	// 		name: '前1h累计进站',
	// 		total: 1232,
	// 		unit: '人',
	// 		icon: requireImg('global/person1.png'),
	// 	},
	// 	{
	// 		name: '前1h累计出站',
	// 		total: 1124,
	// 		unit: '人',
	// 		icon: requireImg('global/person2.png'),
	// 	},
	// 	{
	// 		name: '当前实时站内',
	// 		total: 217,
	// 		unit: '人',
	// 		icon: requireImg('global/person3.png'),
	// 	},
	// ])
</script>

<style lang="scss" scoped>
	.list {
		height: 670px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.item {
		display: flex;
		img.icon {
			width: 248px;
			height: 178px;
		}
		.info {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.number {
			display: flex;
			align-items: end;
			.total {
				font-size: 56px;
			}
			.unit {
				font-size: 28px;
				margin-left: 20px;
			}
		}
		.name {
			margin-top: 20px;
			font-size: 32px;
		}
		&:nth-child(odd) {
			.total {
				color: #ccf7ff;
				text-shadow: 0px 0px 14px rgba(0, 128, 255, 0.8);
			}
		}
		&:nth-child(even) {
			.total {
				color: #ffe0c0;
				text-shadow: 0px 0px 14px rgba(255, 128, 0, 0.9);
			}
		}
	}
</style>
